<!-- global-menu/StaticMenu.vue - 静态菜单分发器 -->
<template>
  <!-- 🎯 根据布局模式选择对应的菜单组件 -->
  <component 
    :is="currentLayoutMenuComponent" 
    :config="menuConfig"
    :use-dynamic="false"
    :menu-data="[]"
  />
</template>

<script setup>
import { computed } from 'vue'
import VerticalMenu from './modules/VerticalMenu.vue'
import HorizontalMenu from './modules/HorizontalMenu.vue'
import VerticalMixMenu from './modules/VerticalMixMenu.vue'
import HorizontalMixMenu from './modules/HorizontalMixMenu.vue'

// 🎯 Props
const props = defineProps({
  layoutMode: {
    type: String,
    required: true
  },
  menuConfig: {
    type: Object,
    default: () => ({})
  }
})

// 🎯 布局菜单组件映射（核心！）
const layoutMenuMap = {
  'vertical': VerticalMenu,
  'horizontal': HorizontalMenu,
  'vertical-mix': VerticalMixMenu,
  'horizontal-mix': HorizontalMixMenu
}

// 🎯 当前布局对应的菜单组件
const currentLayoutMenuComponent = computed(() => {
  const component = layoutMenuMap[props.layoutMode]
  
  if (!component) {
    console.warn(`❌ 未找到 ${props.layoutMode} 对应的菜单组件，使用默认垂直菜单`)
    return VerticalMenu
  }
  
  console.log(`🎯 使用静态菜单组件: ${component.__name || props.layoutMode}`)
  return component
})
</script>

<style scoped>
/* 分发器不需要样式 */
</style>